<template>
  <div>
    <el-dialog
      :title="dialogInfoData.dialogTitle"
      :visible.sync="dialogInfoData.dialogVisible"
    >
      <el-form :model="formData" :rules="rules" ref="form">
        <el-form-item label="标题" :label-width="formLabelWidth" prop="titile">
          <el-input v-model="formData.titile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容" :label-width="formLabelWidth">
          <avue-ueditor
            v-model="formData.content"
            v-bind="options"
          ></avue-ueditor>
        </el-form-item>

        <el-form-item
          label="消息类型"
          :label-width="formLabelWidth"
          prop="msgType"
        >
          <el-select v-model="formData.msgType" clearable placeholder="请选择">
            <el-option
              v-for="item in msgType"
              :key="item.vlaue"
              :label="item.name"
              :value="item.vlaue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="通知终端"
          :label-width="formLabelWidth"
          prop="userType"
        >
          <el-select v-model="formData.userType" clearable placeholder="请选择">
            <el-option
              v-for="item in userType"
              :key="item.vlaue"
              :label="item.name"
              :value="item.vlaue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-show="!formData.id"
          label="发送人员"
          :label-width="formLabelWidth"
          prop="userIds"
        >
          <el-tree
            :data="userTreeData"
            :props="defaultProps"
            node-key="id"
            show-checkbox
            ref="tree"
          >
            <span class="custom-tree-node" slot-scope="{ data }">
              <span class="span-info">
                <img
                  v-show="data.headPic"
                  :src="data.headPic"
                  class="user_head"
                />
                {{ data.roleName || data.fullName || data.username }}</span
              >
            </span>
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="addOrUpd()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="再次发送"
      :visible.sync="dialogInfoData.sendDialogVisible"
    >
      <el-form v-model="formData">
        <el-form-item
          label="发送人员"
          :label-width="formLabelWidth"
          prop="userIds"
        >
          <el-tree
            :data="sendUserTreeData"
            :props="defaultProps"
            node-key="id"
            show-checkbox
            ref="sendTree"
          >
            <span class="custom-tree-node" slot-scope="{ data }">
              <span class="span-info">
                <img
                  v-show="data.headPic"
                  :src="data.headPic"
                  class="user_head"
                />
                {{ data.roleName || data.fullName || data.username }}</span
              >
            </span>
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="sendAgain()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addOrUpd, sendAgain } from "@/services/msgPublish";
import { findUserTree } from "@/services/user";
export default {
  name: "MsgPublishAddOrUpd",
  data() {
    return {
      checkedKeys: [],
      rules: {
        titile: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
          {
            min: 3,
            max: 255,
            message: "长度在255个字符内",
            trigger: "blur",
          },
        ],
        msgType: [
          {
            required: true,
            message: "请选择消息类型",
            trigger: "blur",
          },
        ],
        userType: [
          {
            required: true,
            message: "请选择通知终端",
            trigger: "blur",
          },
        ],
      },
      userTreeData: [],
      sendUserTreeData: [],
      formLabelWidth: "120px",
      dialogInfoData: this.dialogInfo,
      defaultProps: {
        children: "userTreeInfoVos",
        label: "roleName",
      },
      msgType: [
        {
          name: "系统通知",
          vlaue: 1,
        },
        {
          name: "用户咨询",
          vlaue: 2,
        },
      ],
      userType: [
        {
          name: "用户端信息",
          vlaue: 1,
        },
        {
          name: "管理端消息",
          vlaue: 2,
        },
      ],
      options: {
        //普通上传地址
        action: "https://api.avuejs.com/imgupload",
        customConfig: {}, //wangEditor编辑的配置
        //是否启用oss(qiniu/ali)
        oss: "ali",
        headers: {},
        data: {},
        propsHttp: {
          home: "",
          url: "url",
          res: "data",
        },
        //阿里云oss配置
        ali: {
          region: "https://mall--product.oss-cn-beijing.aliyuncs.com",
          endpoint: "oss-cn-beijing.aliyuncs.com",
          accessKeyId: "LTAI5tRKuRR8Uf7ZbWxbLj6o",
          accessKeySecret: "uJeGnNH0NPjROAtRDlJQPpe62DEEDN",
          bucket: "mall--product",
        },
      },
    };
  },
  watch: {
    dialogInfo: {
      handler(newVal) {
        if (newVal.sendDialogVisible) {
          this.$nextTick(() => {
            this.$refs.sendTree.setCheckedKeys([]); // 设置默认选中的节点
          });
        }
        if (newVal.dialogVisible) {
          this.$nextTick(() => {
            this.$refs.tree.setCheckedKeys([]); // 设置默认选中的节点
          });
        }
      },
      deep: true, // 开启深度监听
    },
  },
  props: {
    dialogInfo: {
      required: true,
    },
    formData: Object,
  },
  mounted() {
    this.findUserTree();
  },

  methods: {
    sendAgain() {
      let userIds = [];
      const selectedNodes = this.$refs.sendTree
        .getCheckedNodes()
        .filter((i) => i.id);
      selectedNodes.forEach((e) => {
        userIds.push(e.id);
      });
      if (userIds.length <= 0) {
        this.$message({
          type: "error",
          message: "请选择发送人员",
        });
        return;
      }
      sendAgain(this.formData.id, userIds.join(","))
        .then((res) => {
          if (res.data) {
            this.dialogInfoData.sendDialogVisible = false;
            this.$emit("addOrUpd-success", res.data);
            this.$message({
              type: "success",
              message: "发送成功",
            });
          }
        })
        .catch((error) => {});
    },
    findUserTree() {
      findUserTree()
        .then((res) => {
          this.userTreeData = res.data;
          this.sendUserTreeData = res.data;
        })
        .catch((error) => {});
    },
    addOrUpd() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let form = this.formData;
          let message = "";
          if (this.formData.id) {
            message = "修改成功";
          } else {
            message = "新增成功";
            let userIds = [];
            const selectedNodes = this.$refs.tree
              .getCheckedNodes()
              .filter((i) => i.id);
            selectedNodes.forEach((e) => {
              userIds.push(e.id);
            });
            form.userIds = userIds;
          }
          addOrUpd(form)
            .then((res) => {
              this.dialogInfoData.dialogVisible = false;
              this.$emit("addOrUpd-success", res.data);
              this.$message({
                type: "success",
                message: message,
              });
            })
            .catch((error) => {});
        }
      });
    },
    //关闭弹框
    close() {
      this.dialogInfoData.dialogVisible = false;
      this.dialogInfoData.sendDialogVisible = false;
      this.form = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.span-info {
  display: flex;
  font-size: 16px;
  align-items: center;

  .user_head {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
}
</style>